import { withI18n } from '@lingui/react'
//import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'
import { Page, UserLink, ProjectLink, DeviceLink } from 'components'
import { Icon, Button, Timeline } from 'antd'

@withI18n()
class MyTimeline extends PureComponent {
  render() {
    const {
      i18n,
      refreshhistory,
      moreloading,
      historys,
      historyloadmore,
      location,
    } = this.props
    const makephrase = items => {
      const { data, createdAt, Icontype } = items
      return (
        <Timeline.Item dot={<Icon type={Icontype ? Icontype : 'dashboard'} />}>
          <div>{createdAt}</div>
          <div
            style={{ display: 'block', marginLeft: '5px', marginTop: '5px' }}
          >
            {data.map(item => {
              const typefilter = {
                User: (
                  <UserLink
                    style={{ display: 'inline-block' }}
                    data={item.params}
                  />
                ),
                Project: (
                  <ProjectLink
                    style={{ display: 'inline-block' }}
                    data={item.params}
                  />
                ),
                Device: (
                  <DeviceLink
                    location={location}
                    style={{ display: 'inline-block' }}
                    data={item.params}
                  />
                ),
                Words: (
                  <span style={{ display: 'inline-block' }}>{item.words}</span>
                ),
              }
              return typefilter[item.type]
            })}
          </div>
        </Timeline.Item>
      )
    }
    return (
      <Page inner>
        <Button.Group style={{ margin: '10px', marginTop: '0px' }}>
          <Button
            style={{ marginTop: '0px', marginBottom: '10px' }}
            onClick={e => refreshhistory()}
          >
            <Icon type="sync" />
          </Button>
        </Button.Group>
        <Timeline
          style={{
            marginTop: '10px',
            padding: '0px',
            paddingRight: '0px',
          }}
          pending={moreloading ? i18n.t`Loading...` : false}
          reverse={false}
        >
          {historys.map(his => his && his.data && makephrase(his))}
        </Timeline>

        <Button
          style={{ marginTop: '0px', marginBottom: '10px' }}
          onClick={historyloadmore}
        >
          {i18n.t`Load More`}
        </Button>
      </Page>
    )
  }
}

MyTimeline.propTypes = {}

export default MyTimeline
